<template>
    <div class="ma-content-block lg:flex justify-between p-4">
        <div class="app-container">
            <div class="container-content">
                <a-form
                    :model="objForm"
                    :style="{ width: '600px' }"
                    @submit="handleSubmit"
                >
                    <template v-if="objForm[activeKeyID]">
                        <a-form-item field="project_name" label="项目类型">
                            <a-radio-group v-model="activeKeyID">
                                <a-radio
                                    v-for="key of Object.keys(objForm)"
                                    :value="Number(key)"
                                    >{{ objForm[key].project_name }}</a-radio
                                >
                            </a-radio-group>
                        </a-form-item>
                        <a-form-item field="title" label="网页标题">
                            <a-input
                                v-model="objForm[activeKeyID].title"
                            ></a-input>
                        </a-form-item>
                        <a-form-item field="title_en" label="网页标题(en)">
                            <a-input
                                v-model="objForm[activeKeyID].title_en"
                            ></a-input>
                        </a-form-item>
                        <a-form-item field="menu_name" label="菜单名称">
                            <a-input
                                v-model="objForm[activeKeyID].menu_name"
                            ></a-input>
                        </a-form-item>
                        <a-form-item field="menu_name_en" label="菜单名称(en)">
                            <a-input
                                v-model="objForm[activeKeyID].menu_name_en"
                            ></a-input>
                        </a-form-item>
                        <a-form-item field="logo_url" label="logo1">
                            <div style="display: flex; align-items: end">
                                <maUpload
                                    style="height: 130px"
                                    type="image"
                                    v-model:modelValue="
                                        objForm[activeKeyID].logo_url
                                    "
                                />
                                <div class="ml10">推荐尺寸150*50</div>
                            </div>
                        </a-form-item>
                        <a-form-item field="logo_url2" label="logo2">
                            <div style="display: flex; align-items: end">
                                <maUpload
                                    style="height: 130px"
                                    type="image"
                                    v-model:modelValue="
                                        objForm[activeKeyID].logo_url2
                                    "
                                />
                                <div class="ml10">推荐尺寸40*40</div>
                            </div>
                        </a-form-item>
                        <a-form-item field="wallpaper" label="登录背景">
                            <div style="display: flex; align-items: end">
                                <maUpload
                                    style="height: 130px"
                                    type="image"
                                    v-model:modelValue="
                                        objForm[activeKeyID].wallpaper
                                    "
                                />
                                <div class="ml10">推荐尺寸1920*1080</div>
                            </div>
                        </a-form-item>
                        <a-form-item field="backend_setting" label="用户主题">
                            <!-- <a-input
                            v-model="objForm[activeKeyID].backend_setting"
                        ></a-input> -->
                            <a-radio-group
                                v-model="objForm[activeKeyID].theme_key"
                            >
                                <a-radio
                                    v-for="item in themes"
                                    :value="item.theme_key"
                                    >{{ item.theme_name }}</a-radio
                                >
                            </a-radio-group>
                        </a-form-item>
                    </template>

                    <a-form-item>
                        <a-button
                            @click="updateConfig"
                            style="background-color: #3976ff"
                            type="primary"
                            html-type="submit"
                            >修改</a-button
                        >
                    </a-form-item>
                </a-form>
            </div>
        </div>
    </div>
</template>
<script setup>
import { ref, reactive, getCurrentInstance } from 'vue';
import { useAppStore, useUserStore, useConfigStore } from '@/store';
import tool from '@/utils/tool';
import maUpload from '@/components/ma-upload/index.vue';
import { Message } from '@arco-design/web-vue';
import { $request } from '@/utils/request';
import router from '@/router';

const activeKeyID = ref('');
const objForm = ref({});
const themes = ref([]);
const appStore = useAppStore();
const userStore = useUserStore();
const configStore = useConfigStore();

const handleSubmit = (data) => {
    console.log(data);
};

const getThemes = () => {
    $request.get('/cloud/theme/getAll').then((res) => {
        themes.value = res;
    });
};

const getConfig = () => {
    $request.get('/cloud/projectConfig/getList').then((res) => {
        res.forEach((n, i) => {
            if (n.is_selected === 1) {
                activeKeyID.value = n.id;
            }
            objForm.value[n.id] = n;
        });
    });
};

const updateConfig = () => {
    let item = themes.value.find(
        (n) => n.theme_key === objForm.value[activeKeyID.value].theme_key
    );
    let params = {
        ...objForm.value[activeKeyID.value],
        logo_url: objForm.value[activeKeyID.value].logo_url || '',
        logo_url2: objForm.value[activeKeyID.value].logo_url2 || '',
        wallpaper: objForm.value[activeKeyID.value].wallpaper || '',
        backend_setting:
            typeof item.backend_setting === 'string'
                ? JSON.parse(item.backend_setting)
                : item.backend_setting
    };
    $request.post('/cloud/projectConfig/update', params).then((res) => {
        getConfig();
        Message.success('修改成功');
        tool.local.set('setting', JSON.stringify(params.backend_setting));
        appStore.$state = {
            ...params.backend_setting
        };

        configStore.$state.logo1 = params.logo_url;
        configStore.$state.logo2 = params.logo_url2;

        document.body.setAttribute('arco-theme', params.backend_setting.mode);
        document.body.setAttribute('mine-skin', params.backend_setting.skin);
        userStore.$state.user.backend_setting = params.backend_setting;
        userStore.setApp();
    });
};

const updateUrl = (url) => {
    console.log('wwwwwwwwwwwwwww', url);
};

getConfig();
getThemes();
</script>
<script>
export default { name: 'cloud:project' };
</script>
<style lang="less" scoped>
@import url('@/style/layout.less');
</style>
